<template>
  <div>
    <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
  name: 'User',
  components:{
    
  },
  data () {
    return {
      direction:'forward'
    }
  },
  watch:{
    '$route':function(to, from){
      this.switchPage(to, from);
    }
  },
  methods: {
    switchPage(to, from){
      const toDepth = to.path.split('/').length;
      const fromDepth = from.path.split('/').length;
      if(toDepth < fromDepth){
        this.direction = 'back'
      }else if(toDepth == fromDepth){
        // console.log("相等")
        var tolevel = to.meta.level,
            fromlevel = from.meta.level;
        if(tolevel && fromlevel && tolevel<fromlevel){
          this.direction = 'back';
        }else{
          this.direction = 'forward'
        }
      }else{
        this.direction = 'forward'
      };
    }
  },
}
</script>